<template>
  <div class="div">
    <div class="table-div" style="height: 800px">
      <!--  选择商品dialog -->
      <el-dialog
        title="选择商品"
        :visible.sync="handleSentDialogVisible"
        width="65%"
        height="500px"
      >
        <!-- 表单 -->
        <el-form
          :inline="true"
          :model="formChoiceGoods"
          class="demo-form-inline"
        >
          <el-form-item>
            <el-select
              v-model="formHandleSent"
              placeholder="一级分类"
              style="margin-right: 0px; width: 170px"
            >
              <el-option
                v-for="item in customerTypeOptions"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="value"
              placeholder="二级分类"
              style="margin-right: 0px; width: 170px"
            >
              <el-option
                v-for="item in areaOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="input"
              placeholder="请输入商品编码/名称/助记码"
              style="width: 210px"
            ></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              style="
                border: 0;
                height: 31px;
                margin-left: -2px;
                margin-top: -1px;
              "
            ></el-button>
          </el-form-item>
        </el-form>
        <!-- 发放优惠券table表格 -->
        <el-table
          ref="multipleTable"
          :data="goodsChoiceTable"
          tooltip-effect="dark"
          style="width: 100%"
          @select="handleSelectionChange"
          @selection-change="handleSelectionChangesss"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="商品名称" prop="name"></el-table-column>
          <el-table-column
            prop="goodsPrice.unit"
            label="单位"
          ></el-table-column>
          <el-table-column
            prop="goodsPrice.recently_price"
            label="最近一次进货价"
          ></el-table-column>
          <el-table-column
            prop="goodsPrice.price"
            label="市场价"
          ></el-table-column>
          <!-- <el-table-column label="操作">
            <span>添加</span>
          </el-table-column> -->
        </el-table>
        <!-- 选择商品分页 -->
        <el-pagination
          background
          style="text-align: right"
          layout="total, prev, pager, next,sizes,jumper"
          :total="total"
          :current-page="dataFilter.current"
          :page-size="dataFilter.pagesize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <span slot="footer" class="dialog-footer">
          <el-button  @click="toggleSelection">取 消</el-button>
          <el-button type="primary" @click="handleAddGoods">添 加</el-button>
        </span>
      </el-dialog>
      <!--  -->
      <el-form :model="addForm">
        <el-form-item label="活动类型" label-width="100px">
          <el-tag type="warning">满减</el-tag>
        </el-form-item>
        <el-form-item label="活动名称" prop="name" label-width="100px">
          <el-input
            v-model="addForm.name"
            style="width: 290px"
            placeholder="请输入活动名称，不超过5个字"
          ></el-input>
        </el-form-item>
        <el-form-item label="生效时间" label-width="100px">
          <el-date-picker
            placeholder="131"
            v-model="addForm.timeList"
            type="daterange"
            style="width: 240px"
            range-separator=""
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="满减规则" label-width="100px">
          <div
            v-for="(item, index) in this.mjgz"
            :key="index"
            style="height: 40px"
          >
            <span>消费满</span>
            <el-input
              style="width: 70px"
              v-model="addForm.marketingFullMinusRuleList[index].fullPrice"
            ></el-input>
            元减
            <el-input
              style="width: 70px"
              v-model="addForm.marketingFullMinusRuleList[index].reducePrice"
            ></el-input>
            元
            <el-button
              v-show="index !== 0 ? true : false"
              @click="delMjgz"
              style="margin-left: 10px; width: 70px"
            >
              删除
            </el-button>
          </div>
          <el-tag
            @click="addMjgz"
            v-show="this.mjgz !== 5 ? true : false"
            style="
              background-color: rgb(24, 144, 255);
              color: white;
              font-size: 13px;
              height: 35px;
              padding: 7px;
              cursor: pointer;
            "
          >
            + 添加满减规则(最多五条)
          </el-tag>
        </el-form-item>
        <el-form-item label="满减商品" label-width="100px">
          <el-radio-group v-model="radio" @change="changeRadio">
            <el-radio :label="3">全部商品</el-radio>
            <el-radio :label="6">部分商品</el-radio>
            <el-radio :label="9">排除商品</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="活动商品列表 "
          label-width="127px"
          v-show="this.radio !== 3 ? true : false"
        >
          <el-tag
            style="
              background-color: rgb(24, 144, 255);
              color: white;
              font-size: 13px;
              height: 35px;
              padding: 7px;
              cursor: pointer;
            "
            @click.native="handleSentDialogVisible = true"
          >
            + 新增
          </el-tag>
        </el-form-item>
        <el-form-item
          label-width="20px"
          v-show="this.radio !== 3 ? true : false"
        >
          <el-input
            placeholder="请输入商品名称"
            v-model="goodName"
            style="width: 250px"
          >
            <el-button
              style="background-color: rgb(24, 144, 255); width: 50px"
              slot="append"
              icon="el-icon-search"
              @click="goToCheak()"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-table
          :data="handleData"
          style="width: 96%; margin-left: 20px"
          v-show="this.radio !== 3 ? true : false"
        >
          <el-table-column
            prop="name"
            label="商品名称"
            width="800"
          ></el-table-column>
          <el-table-column
            prop="goodsPrice.unit"
            label="单位"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="goodsPrice.price"
            label="市场价"
          ></el-table-column>
          <el-table-column prop="address" label="操作">
            <span>删除</span>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next,sizes, jumper"
          :page-size="10"
          :page-sizes="[10, 20, 30, 40]"
          style="text-align: left; margin-left: 20px; margin-bottom: 20px"
          :total="0"
        />
        <el-form-item label-width="20px">
          <el-button type="primary" @click="saveAll">保存</el-button>
          <el-button @click="goToFullDecrease">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
 
<script>
import { add } from '@/api/marketing/fullDecrease'
import { addGoods } from '@/api/marketing/choiceGood'

export default {
  data() {
    return {
      goodsChoiceTable: [], //商品dialog table。
      addForm: {
        name: '1',
        rule: '1',
        timeList: [],
        marketingFullMinusItemsList: [], //商品table。
        marketingFullMinusRuleList: [
          {
            fullPrice: 0,
            reducePrice: 0,
          },
        ],
      }, //新增数组。
      handleSentDialogVisible: false, //手动发放dialog。
      mjgz: 1, //添加满减规则。
      radio: 3, //单选框。
      dataFilter: { pagesize: 5, current: 1 }, //分页。
     

      goodName: '',
      formChoiceGoods: {}, //选择商品form。
      total: null,
      handleData: [], //手动选择商品array。
      multipleSelection: [],  
      checkData:[],
    }
  },
  mounted() {
    this.getAllGoods()
  },
  methods: {
    //增加满减规则
    addMjgz() {
      this.mjgz++
      let params = {
        fullPrice: 0,
        reducePrice: 0,
      }
      this.addForm.marketingFullMinusRuleList.push(params)
    },
    //减少满减规则
    delMjgz() {
      this.mjgz--
    },
    //选择单选按钮。
    changeRadio() {
      console.log(this.radio)
    },
    //跳转到goToFullDecrease页面。
    goToFullDecrease() {
      this.$router.push({ path: '/market/campaign/fullDecrease' })
    },
    //保存。
    async saveAll() {
      const res = await add(this.addForm)
      console.log('满减新增接口数据', res)
    },
    //获取商品列表。
    async getAllGoods() {
      const res = await addGoods(this.dataFilter)
      this.goodsChoiceTable = res.data.list
      this.total = res.data.total 
    },
    //分页点击事件。
    handleSizeChange(val) {
      this.dataFilter.pagesize = val
      this.getAllGoods()
    },
    //分页点击事件。
    handleCurrentChange(val) {
      this.dataFilter.current = val
      this.getAllGoods()
    },
    //手动选择商品确定按钮。
    handleAddGoods() {
      this.handleData = this.checkData   //
      if (this.handleData.length !== 0) {
        this.handleData.forEach( item =>{
          let params = {
            productId : item.id
          }
        this.addForm.marketingFullMinusItemsList.push(params)
        })
        console.log(this.addForm.marketingFullMinusItemsList,'1111111111111');
        this.handleSentDialogVisible = false
      } else {
        this.$confirm('请选择需要添加的商品', '操作失败', {
          showClose: false,
          showCancelButton: false,
          closeOnClickModal: false,
          confirmButtonText: '确定',
          type: 'error',
        })
      }
    },
    //当用户手动勾选数据行的 Checkbox 时触发的事件。
    handleSelectionChange(sel) {
      console.log(sel, 'selselsel')
      this.checkData = sel
    },
     handleSelectionChangesss(val) {
        this.multipleSelection = val;
      },
    toggleSelection() {
      this.handleSentDialogVisible = false
      // this.$refs.multipleTable.clearSelection();
       this.handleSelectionChange()
      },
  },
}
</script>
 
<style scoped lang="scss">
::v-deep .el-icon-search:before {
  content: '';
  color: rgb(255 255 255);
}
::v-deep .el-input-group__append {
  border: none;
}
</style>
